import { ref, watch, nextTick, computed } from 'vue'

export default function useFiexd(props) {
    // 先index-list.vue 的 ul设置ref获取dom
    const groupRef = ref(null)
    // 高度区间
    const listHeights = ref([])
    // 纵向值
    const scrollY = ref(0)
    // 当前渲染组的索引
    const currentIndex = ref(0)
    // 下一个组 当前组顶部的距离
    const distance = ref(0)
    // title层高度
    const TITLE_HEIGHT = 30
    const fixedTitle = computed(() => {
        if (scrollY.value < 0) {
            return ''
        } else {
            const currentGroup = props.data[currentIndex.value]
            return currentGroup ? currentGroup.title : ''
        }
    })
    // 定义一个css 样式变量  为了有一个被顶上去的过渡效果
    const fiexdStyle = computed(() => {
        const distanceValue = distance.value
        const diff = (distanceValue > 0 && distanceValue < TITLE_HEIGHT) ? distanceValue - TITLE_HEIGHT : 0
        return {
            transform: `translate3d(0, ${diff}px, 0)`
        }
    })
    // 监听data变化
    watch(() => props.data, async () => {
        // dom渲染完成后执行 辅助函数 也就是获取每一组的高度
        await nextTick()
        calculate()
    })
     // 监听scrollY变化  newY 当前所在高度
     watch(scrollY, (newY) => {
        // 看这个y在哪个区间内
        // 获取区间
        const listHeightsVal = listHeights.value
        for (let i = 0; i < listHeightsVal.length - 1; i++) {
            // 获取每一组的 开始值和结束值
            const heightTop = listHeightsVal[i]
            const heightBottom = listHeightsVal[i + 1]
            // 如果当前y值 大于开始值 小于初始值 就给他是 i
            if (newY >= heightTop && newY <= heightBottom) {
                currentIndex.value = i
                distance.value = heightBottom - newY
            }
        }
    })
    // 获取列表高度的辅助函数
    function calculate() {
        // 获取 ul下的所有li
        const list = groupRef.value.children
        const listHeightsVal = listHeights.value
        let height = 0

        listHeightsVal.length = 0
        listHeights.value.push(height)
        for (let i = 0; i < list.length; i++) {
            height += list[i].clientHeight
            // 每一组的高度放到 listHeights.value
            listHeights.value.push(height)
        }
    }
    // better-scroll 监听事件
    function onScroll(pos) {
        // 获取屏幕当前Y轴坐标
        scrollY.value = -pos.y
    }

    return {
        groupRef,
        onScroll,
        fixedTitle,
        fiexdStyle,
        currentIndex
    }
}
